<template>
  <v-card color="basil">
    <v-card-title class="text-center justify-center py-6">
      <h1 class="font-weight-bold display-3 basil--text">
      </h1>
    </v-card-title>

    <v-tabs
      v-model="tab"
      background-color="transparent"
      color="basil"
      grow
    >
      <v-tab
        v-for="item in tabs"
        :key="item"
      >
        {{ item }}
      </v-tab>
    </v-tabs>

    <v-tabs-items v-model="tab">

      <!-- <v-tab-item
        v-for="item in tabs"
        :key="item"
      > -->
      <v-tab-item>
        <v-card
          flat
        >
         <v-data-table
        dense
        v-model="selectedRobot"
        :headers="header"
        :items="robot"
        :page.sync="page"
        :items-per-page="itemsPerPage"
        item-key="webhook"
        show-select
        hide-default-footer
        class="elevation-1 mt-6"
        @page-count="pageCount = $event"
      >
        <template v-slot:top>
          <v-toolbar flat>
            <v-toolbar-title>机器人</v-toolbar-title>
            <v-divider class="mx-4" inset vertical></v-divider>
            <v-spacer></v-spacer>
            <v-dialog v-model="dialog" max-width="500px">
              <template v-slot:activator="{ on, attrs }">
                <v-btn
                  color="primary"
                  dark
                  class="mb-2"
                  v-bind="attrs"
                  v-on="on"
                >
                  新增
                </v-btn>
              </template>

              <v-card>
                <v-card-title>
                  <span class="headline">机器人</span>
                </v-card-title>

                <v-card-text>
                  <v-form ref="form" v-model="valid" lazy-validation>
                    <v-container>
                      <v-text-field
                        v-model="editedItem.name"
                        :counter="20"
                        :rules="nameRules"
                        label="群名称"
                        required
                      ></v-text-field>

                      <v-text-field
                        v-model="editedItem.email"
                        :rules="emailRules"
                        label="机器人地址"
                        required
                      ></v-text-field>

                      <v-select
                        v-model="editedItem.select"
                        :items="items"
                        label="群类型"
                        required
                      ></v-select>
                    </v-container>
                  </v-form>
                </v-card-text>

                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="blue darken-1" text @click="close">
                    取消
                  </v-btn>
                  <v-btn
                    color="blue darken-1"
                    text
                    :disabled="!valid"
                    @click="save"
                  >
                    新增
                  </v-btn>
                </v-card-actions>
              </v-card>
            </v-dialog>
          </v-toolbar>
        </template>
      </v-data-table>
      <div class="text-center pt-2">
        <v-pagination v-model="page" :length="pageCount"></v-pagination>
        <!-- <v-text-field
        :value="itemsPerPage"
        label="每页数量"
        type="number"
        min="-1"
        max="15"
        @input="itemsPerPage = parseInt($event, 10)"
      ></v-text-field> -->
      </div>
      </v-card>
          </v-tab-item>
          
          <v-tab-item>
            <v-card
          color="basil"
          flat
        >
           <div v-for="(value, index) of msg" :key="index" class="my-6">
      <v-card class="mx-auto" max-width="344">
        <v-card-title class="grey white--text">
          {{ account.school }}
        </v-card-title>
        <v-img :src="value.url" height="200px"></v-img>

        <v-card-title>
          {{ value.title }}
        </v-card-title>

        <v-card-subtitle>
          {{ value.content }}
        </v-card-subtitle>

        <v-card-subtitle>
          {{ account.motto }}
        </v-card-subtitle>
        <v-img :src="account.url" height="120px"></v-img>
        <v-card-actions>
          <v-btn color="orange lighten-2" text @click="submit(value)">
            发送
          </v-btn>

          <v-spacer></v-spacer>

          <v-btn icon @click="show = !show">
            <v-icon>{{ show ? "mdi-chevron-up" : "mdi-chevron-down" }}</v-icon>
          </v-btn>
        </v-card-actions>

        <v-expand-transition>
          <div v-show="show">
            <v-divider></v-divider>

            <v-card-text>
              {{ value.content }}
            </v-card-text>
          </div>
        </v-expand-transition>
      </v-card>
    </div>
          <!-- <v-card-text>{{ index }} {{ text }}</v-card-text> -->
        </v-card>
      </v-tab-item>
          <v-tab-item>
            <v-card
          color="basil"
          flat
        >
        <div v-for="(value, index) of schoolMsg" :key="index" class="my-6">
      <v-card class="mx-auto" max-width="344">
        <v-card-title class="grey white--text">
          {{ account.school }}
        </v-card-title>
        <v-img :src="value.url" height="200px"></v-img>

        <v-card-title>
          {{ value.title }}
        </v-card-title>

        <v-card-subtitle>
          {{ value.content }}
        </v-card-subtitle>

        <v-card-subtitle>
          {{ account.motto }}
        </v-card-subtitle>
        <v-img :src="account.url" height="120px"></v-img>
        <v-card-actions>
          <v-btn color="orange lighten-2" text @click="submit(value)">
            发送
          </v-btn>

          <v-spacer></v-spacer>

          <v-btn icon @click="show = !show">
            <v-icon>{{ show ? "mdi-chevron-up" : "mdi-chevron-down" }}</v-icon>
          </v-btn>
        </v-card-actions>

        <v-expand-transition>
          <div v-show="show">
            <v-divider></v-divider>

            <v-card-text>
              {{ value.content }}
            </v-card-text>
          </div>
        </v-expand-transition>
      </v-card>
    </div>
      </v-card>
          </v-tab-item>
          
          <v-tab-item>
            <v-card
          color="basil"
          flat
        >
        自定义素材
        图片
        标题 输入框
        文字 块状
        <v-file-input 
   @change="Preview_image"
   v-model="image"
   >
</v-file-input>
<v-img :src="url"></v-img>

      </v-card>
          </v-tab-item>

    </v-tabs-items>
  </v-card>
</template>

<script>
export default {
  props:['loginTo'],
  data: () => ({
    url: null,
      image: null,
    tab: null,
    tabs: ['机器人','通用素材', '学校素材','自定义素材'],
    page: 1,
    pageCount: 0,
    itemsPerPage: 20,
    selectedTable: [],
    header: [
      {
        text: "群名称",
        align: "start",
        sortable: false,
        value: "name",
      },
    ],
    absolute: true,
    overlay: false,
    selectedRobot: [],
    show: false,
    valid: true,
    msg: [],
    schoolMsg:[],
    account: [],
    robot: [],
    name: "",
    nameRules: [
      (v) => !!v || "请输入群名称",
      (v) => (v && v.length <= 20) || "群名称不可以超过20个字符",
    ],
    email: "",
    emailRules: [
      (v) => !!v || "请输入机器人地址",
      (v) =>
        /^https:\/\/+(oapi)+\.+(dingtalk)+\.+(com)+/.test(v) ||
        "机器人地址格式有误",
    ],
    select: null,
    items: [
        '一年级',
        '二年级',
        '三年级',
        '四年级',
        '五年级',
        '六年级',
        '初一',
        '初二',
        '初三',
        '高一',
        '高二',
        '高三',
        '其他'
      ],
    dialog: false,
    editedIndex: -1,
    editedItem: {
      name: "",
      email: "",
      select: null,
    },
    defaultItem: {
      name: "",
      email: "",
      select: null,
    },
  }),
  watch: {
    dialog(val) {
      val || this.close();
    },
  },
  created() {
    var account = JSON.parse(localStorage.getItem('login'));
    if(account){
      this.$emit('back');
      this.account = account;
      this.getData(account.phone);
    }else{
      setTimeout(() => (this.$router.push('/login')), 100);
    }
  },
  methods: {
     Preview_image() {
      this.url= URL.createObjectURL(this.image)
    },
    getData(phone) {
      //this.getAccount(phone, "getAccount");
      this.getRobot(phone, "getRobotByGroup");
      // this.getRobot(phone, "getRobot");
      this.getMsg();
      this.getSchoolMsg(phone, "getSchoolMsg");
    },
    getAccount(phone, method) {
      var url = this.$Global.api;
      var requireData = { phone: phone, method: method };
      this.$axios
        .post(url, requireData)
        .then((res) => {
          console.log("学校信息", res);
          this.account = res.data[0];
        })
        .catch(function (error) {
          // 请求失败处理
          console.log(error);
        });
    },
    getRobot(phone, method) {
      var url = this.$Global.api;
      var requireData = { phone: phone, method: method };
      this.$axios
        .post(url, requireData)
        .then((res) => {
          console.log("学校机器人", res);
          this.robot = res.data;
        })
        .catch(function (error) {
          // 请求失败处理
          console.log(error);
        });
    },
    getMsg() {
      var url = this.$Global.api;
      var requireData = { method: "getMsg" };
      this.$axios
        .post(url, requireData)
        .then((res) => {
          console.log("通用素材", res);
          this.msg = res.data;
        })
        .catch(function (error) {
          // 请求失败处理
          console.log(error);
        });
    },
    getSchoolMsg(phone,method) {
      var url = this.$Global.api;
      var requireData = {phone:phone, method: method };
      this.$axios
        .post(url, requireData)
        .then((res) => {
          console.log("学校素材", res);
          this.schoolMsg = res.data;
        })
        .catch(function (error) {
          // 请求失败处理
          console.log(error);
        });
    },
    addRobot(phone, name, webhook, grade, method) {
      var url = this.$Global.api;
      var requireData = {
        phone: phone,
        name: name,
        webhook: webhook,
        grade: grade,
        method: method,
      };
      console.log(requireData);
      this.$axios
        .post(url, requireData)
        .then((res) => {
          console.log("新增机器人", res);
          this.addBack();
        })
        .catch(function (error) {
          // 请求失败处理
          console.log(error);
        });
    },
    submit(msg) {
      //console.log(msg,this.account,this.selectedRobot);
      if (this.selectedRobot.length) {
        var content = {
          school: this.account.school,
          image: msg.url,
          title: msg.title,
          content: msg.content,
          motto: this.account.motto,
          logo: this.account.url,
          robot: this.selectedRobot,
          method: "sendMsg",
        };
        this.sendMsg(content);
        //console.log(content);
      } else {
        alert("请选择需要推送的群");
      }
    },
    sendMsg(content) {
      var url = this.$Global.api;
      var requireData = content;
      this.$axios
        .post(url, requireData)
        .then((res) => {
          console.log("推送消息", res);
          //this.account = res.data[0];
          alert("发送成功");
        })
        .catch(function (error) {
          // 请求失败处理
          console.log(error);
        });
    },
    close() {
      this.dialog = false;
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      });
    },

    save() {
      this.$refs.form.validate();
      if (this.editedItem.email && this.editedItem.name) {
        this.addRobot(
          this.$Global.phone,
          this.editedItem.name,
          this.editedItem.email,
          this.editedItem.select,
          "addRobot"
        );
      }
    },
    addBack(){
      if (this.editedIndex > -1) {
        Object.assign(this.robot[this.editedIndex], this.editedItem);
      } else {
        this.robot.push(this.editedItem);
      }
      this.close();
    }
  },
};
</script>

<style>
/* Helper classes */
.basil {
  background-color: #FFFBE6 !important;
}
.basil--text {
  color: #356859 !important;
}
.title {
  background-color: black;
  color: aliceblue;
}
</style>